<template>
	<view class="content">
    <page-header />
    <!-- 顶部滚动公告 -->
    <scroll-bar />
    <view
        class="swiper"
        hover-class="swiper-hover"
    >
      <uSwiper
          mode="none"
          height="290"
          :list="list"
      />
    </view>
    <Card
      :title="'今日课表'"
    >
      <template>
        <view class="no-bind">
          <text class="title">请绑定账户后继续</text>
          <text class="time">点击此处绑定</text>
        </view>
      </template>
    </Card>
    <Card
        :title="'通知公告'"
        :height="'265rpx'"
    >
      <template>
        <view class="notice-list">
          <view class="list-item">
            <view class="list-item-title">请绑定账啊实打实大师大大奥术大师多户后继续</view>
            <text class="list-item-time">2020-09-21</text>
          </view>
          <view class="list-item">
            <view class="list-item-title">请绑定账啊实打实大师大大奥术大师多户后继续</view>
            <text class="list-item-time">2020-09-21</text>
          </view>
          <view class="list-item">
            <view class="list-item-title">请绑定账啊实打实大师大大奥术大师多户后继续</view>
            <text class="list-item-time">2020-09-21</text>
          </view>          <view class="list-item">
          <view class="list-item-title">请绑定账啊实打实大师大大奥术大师多户后继续</view>
          <text class="list-item-time">2020-09-21</text>
        </view>
          <view class="list-item">
            <view class="list-item-title">请绑定账啊实打实大师大大奥术大师多户后继续</view>
            <text class="list-item-time">2020-09-21</text>
          </view>

        </view>
      </template>
    </Card>
    <Card
        :title="'每日一句'"
    >
      <template>
        <view class="dayLine">
          <text class="title">想一个人有多想念，那又是文字失效的瞬间。</text>
          <text class="dayLine-content">仓级</text>
        </view>
      </template>
    </Card>
	</view>
</template>

<script>
	import uSwiper from "uview-ui/components/u-swiper/u-swiper.vue";
	import Card from "@/pages/Index/components/Card.vue";
	import PageHeader from "@/components/PageHeader";
	import ScrollBar from "@/pages/Index/components/ScrollBar";
	export default {
		components:{
			uSwiper,
      Card,
      PageHeader,
      ScrollBar
		},
		data() {
			return {
			  touchThing:false,
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
  .content{
    min-height: 100vh;
    background: #F1F1F1;
  }


	.swiper {
		padding: 15rpx 15rpx 0 15rpx;
    animation: hide 0.4s;
	}

  .swiper:active{
    animation: _show 0.4s;
    transform: scale(0.8)
  }
  @keyframes hide {
    from { transform:scale(0.8); }
    to { transform: scale(1) }
  }
  @keyframes _show {
    from { transform:scale(1); }
    to { transform: scale(0.8) }
  }
  .swiper-hover{
    animation: _show 0.4s;
    transform: scale(0.8)
  }
  //未绑定样式
  .no-bind {
    height: 100%;
    font-size: 25rpx;
    color: #B0B0B0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  //通知公告 列表
  .notice-list{
    display: flex;
    flex-direction: column;
    font-size: 26rpx;
    .list-item{
      height: 35rpx;
      position: relative;
      display: flex;
    }
    .list-item:before{
      content: "★";
      width: 10rpx;
      height: 10rpx;
      margin-right: 20rpx;
    }
    .list-item-title{
      width:425rpx;
      overflow:hidden;
      white-space:nowrap;/*限制不换行*/
      text-overflow:ellipsis;
    }
    .list-item-time{
      right: 0;
      position: absolute;
    }

  }

  //每日一句
  .dayLine{
    height: 100%;
    font-size: 30rpx;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    .dayLine-content{
      bottom:0;
      right: 20rpx;
      position: absolute;
    }
  }
</style>
